<script setup lang="ts">
const {
  data = [],
  current = '',
  click = () => {},
  edit = () => {},
  del = () => {}
} = defineProps<{
  data?: BaseModelTreeType
  current?: string
  click?: (id: string) => void
  edit?: (id: string) => void
  del?: (id: string, cascade: boolean) => void
}>()

const isDirDefaultOrAll = (id: string) => id === DirIdConst.Default || id === DirIdConst.All
</script>

<template>
  <tree
    filter-placeholder="搜索目录..."
    :data="data"
    :expand-on-click-node="false"
    :current="current"
    :click="click"
  >
    <template #node-float-right="{ nodeData }">
      <div v-if="!isDirDefaultOrAll(nodeData?.value)">
        <edit-btn :click="() => edit(nodeData?.value)" />
        <del-btn :confirm="(cascade) => del(nodeData?.value, cascade)" dir />
      </div>
    </template>
  </tree>
</template>

<style lang="scss">
.dir-tree {
  .dir-tree-node {
    .el-tree-node__content {
      --el-tree-node-content-height: 3rem;
    }
  }

  .el-button {
    padding: 0.35rem;
  }
}
</style>
